<template>
  <div class="observer-lbrary-pages">
    <div style="display: flex;margin-left: 10px;align-items: flex-start;">
        <a-form layout="inline">
          <a-form-item label="培训开始时间"  style="display: flex;margin-top: 10px;">
            <a-date-picker format="YYYY-MM-DD" v-model:value="formItemData.fpxkssj" />
          </a-form-item>
          <a-form-item label="培训结束时间"  style="display: flex;margin-top: 10px;">
                <a-date-picker format="YYYY-MM-DD" v-model:value="formItemData.fpxjssj" />
          </a-form-item>
        </a-form>
          <compSearchCriteria
          :formItem.sync="formItem"
          @searchHandleChange="searchHandleChange"
          v-model="dataTableConfig.requestParams"
          ref="refSearchCriteria"
          />
       </div>
       <div class="btn-box" style="margin: 20px 0;">
          <div></div>
          <a-form layout="inline" style="display: flex;justify-content: flex-end;">
              <a-form-item>
                  <a-button class="blue-btn" type="primary" @click="increaseClick" icon>新增</a-button>
              </a-form-item>
              <a-form-item>
                  <a-button class="red-btn" type="primary" @click="batchDeletion" >批量删除</a-button>
              </a-form-item>
          </a-form>
       </div>

      <div>
          <compTable
           :key="compSelectorkey"
           :config='dataTableConfig'
           :columns="columns"
           :scroll="{ x: 200 }"
           :requestParamObj="requestParams"
           @selectedRowKeys="selectedRowKeys"
           @sorterChange="sorterChange"
           >
              <template v-slot:operation="{record}" data-desc="自定操作栏">
                  <a-form layout="inline" class="search-form">
                      <a-form-item >
                          <a-button class="blue-btn" type="primary" @click="reviseClick(record)">编辑</a-button>
                      </a-form-item>
                      <a-form-item >
                          <a-button class="red-btn" type="primary" @click="deleteClick(record)" >删除</a-button>
                      </a-form-item>
                  </a-form>
              </template>
          </compTable>
      </div>
       <basicInformation ref="refModel" :addEditParameter="addEditParameter" @handleOk="handleOk" :fpxxx="fpxxx"/>
  </div>
</template>
<script>
import compSearchCriteria from '@/components/compSearchCriteria/compSearchCriteria'
import compTable from '@/components/compTable/compTable'
import assessCheckApi from './service/api.js'
import basicInformation from './basicInformation.vue'
import moment from 'moment'
import {typeSelect,} from '@/components/compSearchCriteria/ContractType'
import {deleteItemServe} from './service/index'
export default {
  components:{
      compSearchCriteria,
      compTable,
      basicInformation,
  },

  data(){
      return{
          addEditParameter:{},
          addEditVisible:false,
          selectedRowKeysArr:[],//选中表格数据
          compSelectorkey:'',
          requestParams:{},
          formItem:[
            {
              label: '年份',
              model: 'year',
            },
            {
              type: typeSelect,
              dictionaryType: "培训类型",
              label: "培训类型",
              compType:'Select',
              model: "fpxlx",
              defaultValue:'',
              currentValue:'',
            },
          ],
          formItemData:{
            fpxkssj:'',
            fpxjssj:'',
          },
          columns: [
            {
              title: '培训名称',
              dataIndex: 'fpxmc',
              key: 'fpxmc',
            },
            {
              title: '培训类型',
              dataIndex: 'fpxlx',
              key: 'fpxlx',
            },
            {
              title: '培训开始时间',
              dataIndex: 'fpxkssj',
              key: 'fpxkssj',
            },
            {
              title: '培训结束时间',
              dataIndex: 'fpxjssj',
              key: 'fpxjssj',
            },
            {
              title: '培训地点',
              dataIndex: 'fpxdd',
              key: 'fpxdd',
            },
            {
              title: '培训等级',
              dataIndex: 'fpxdj',
              key: 'fpxdj',
            },
            {
              title: '培训学时',
              dataIndex: 'fpxxs',
              key: 'fpxxs',
            },
            {
              title: '操作',
              dataIndex: 'id',
              fixed: 'right',
              scopedSlots: {customRender: 'operation'},
              width:180,
            }
          ],
          dataTableConfig:{
              api: assessCheckApi.list,
              rowKey: 'id',
              rowName: 'fpxmc',
              rowSelection: {},
              fywflcode:'001002',
          },
          dataTableSearch: {
            api: assessCheckApi.list,
            rowKey: 'id',
            paramet: {

            }
          },
          leadingOutLoading:false,
          DownloadTemplateLoading:false,
          fpxxx:'',
          detailFsjid:'',
      }
  },

  methods:{
      sorterChange(val,sorter){//获取到排序的数据
          //console.log('获取到排序的数据',val,sorter)
      },
      renovateSearchTabel(){//刷新搜索、表格
          this.compSelectorkey = Date.now()
          this.$refs.refSearchCriteria.resetEvents()
      },
      searchHandleChange(val){//获取搜索数据
          if(val.resetEvents){
            this.formItemData.fpxkssj = ''
            this.formItemData.fpxjssj = ''
              this.compSelectorkey = Date.now()
          } else {
            this.dataTableConfig.requestParams =
            {...val}

          }
          this.requestParams = {
            ...this.requestParams,...val,
            fpxkssj:this.formItemData.fpxkssj?moment(this.formItemData.fpxkssj).format('YYYY-MM-DD'):'',
            fpxjssj:this.formItemData.fpxjssj?moment(this.formItemData.fpxjssj).format('YYYY-MM-DD'):''}
      },
      selectedRowKeys(keys){//获取选中表格rowKey
          this.selectedRowKeysArr = keys
      },
      increaseClick(){//新增
          this.$refs.refModel.visibleShow = true
          this.addEditParameter = {}
          this.$refs.refModel.getData()
          this.fpxxx = ''
      },

      batchDeletion(){//
          var that = this
          this.$confirm({
              title:'您确认要删除吗？',
              // icon: createVNode(ExclamationCircleOutlined),
              onOk() {
                  if(that.selectedRowKeysArr.length){
                      let deleteString = that.selectedRowKeysArr.join(',')
                      deleteItemServe({ids:deleteString}).then(res=>{
                          if(res.code == 200){
                              that.$message.success('删除成功')
                          }else{
                              that.$message.warning(res.message)
                          }
                          that.renovateSearchTabel()
                      })
                  }else{
                      that.$message.warning('请选择删除项')
                  }
              },
          });
      },
      handleOk(row,val,id){
          if(val && !id){
              this.renovateSearchTabel()
              this.fpxxx=''
          }else if(val && id){
              this.requestParams = {
                  ...this.requestParams,
                  renovate:true,
              }
          }
          this.addEditParameter = row
          this.$refs.refModel.getData(row)
      },
      //编辑
      reviseClick(val){
          //console.log('编辑',val[0])
          this.addEditParameter = val[0]
          this.fpxxx = val[0].id
          this.$refs.refModel.getData(val[0])
          this.$refs.refModel.visibleShow = true
      },
      //删除
      deleteClick(val){
          var that = this
          this.$confirm({
              title:'您确认要删除吗？',
              // icon: createVNode(ExclamationCircleOutlined),
              onOk() {
                  deleteItemServe({ids:val[0].id}).then(res=>{
                      if(res.code == 200){
                          that.$message.success('删除成功')
                      }else{
                          that.$message.warning(res.message)
                      }
                      that.renovateSearchTabel()
                  })
              },

          });
      },
  },

}
</script>
<style scoped>
.observer-lbrary-pages{
  background: #fff;
}
.btn-box{
  display: flex;
  justify-content: space-between;
}
.blue-btn{
  border: 1px solid #5ca3e5 !important;
  background-color: #5ca3e5 !important;
  color: #fff !important;
}
.red-btn{
  border: 1px solid #ed5565 !important;
  background-color: #ed5565 !important;
}
</style>
